<template>
    <div>
        <el-form ref="userform" :model='user'
            label-position="left"
            label-width="80px">
            <el-form-item label="username:" prop="username">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="password:" prop="password">
                <el-input v-model="user.password" show-password></el-input>
            </el-form-item>
            <el-form-item prop=''>
                <dragVrify
                    :width="width"
                    :height="height"
                    :text="text"
                    ref="Verify">
                </dragVrify>
            </el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <img style="cursor:pointer;" src='http://127.0.0.1:8000/static/dingding.png' height="40" width="120" @click="dingding">

        </el-form>

    </div>
</template>


<script>
import axios from 'axios'
import dragVerify from 'vue-drag-verify';

export default {
  name: 'Login_zk',
    data() {
        return {
            user:{
                "username":'',
                "password":'',
            },
            text:'请将滑块拖动到最右侧',
            width:300,
            height:40,
        }
    },
    methods: {
    // 钉钉
        dingding() {
          let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoawcbhhfj9bdsvwprj&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/dinding'
          window.location.href = url;
        },
        //登录按钮
        login(){
            //验证滑块是否拖动
            console.log(this.$refs['Verify'].isPassing);
            if(this.$refs['Verify'].isPassing == false){
                this.$Message('请拖动滑块')
            }
            else{
                axios.get('http://127.0.0.1:8000/login_zk/',{params:{username:this.user.username,password:this.user.password}}).then(res=>{
                console.log(res);
                this.$Message(res.data.message);
                if(res.data.code==200){
                    localStorage.setItem('username',res.data.username)
                    localStorage.setItem('uid',res.data.uid)
                    this.$router.push('/')
                    }
                })
            }
        }
    },
    //注册组件标签
    components:{
        'dragVrify':dragVerify,
    },
}
</script>
